<template>
	<div id="app">
		<transition :name="`vux-pop-${direction}`">
			<keep-alive include="test">
				<router-view></router-view>
			</keep-alive>
		</transition>
	</div>
</template>

<script>
import { mapState } from 'vuex'

export default {
	name: 'App',
	computed: {
		...mapState({
			direction: state => state.app.direction,
		}),
	},
}
</script>

<style lang="less" scoped>
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
	will-change: transform;
	transition: all 250ms;
	height: 100%;
	width: 100%;
	top: 0;
	position: absolute;
	backface-visibility: hidden;
	perspective: 1000;
}

.vux-pop-out-enter {
	opacity: 0;
	transform: translate3d(-100%, 0, 0);
}

.vux-pop-out-leave-active {
	opacity: 0;
	transform: translate3d(100%, 0, 0);
}

.vux-pop-in-enter {
	opacity: 0;
	transform: translate3d(100%, 0, 0);
}

.vux-pop-in-leave-active {
	opacity: 0;
	transform: translate3d(-100%, 0, 0);
}
</style>
